<template>
	<div>
		<bread-crumb refresh @actRefresh="getDataList">
			<template slot="title">外部客户管理</template>
		</bread-crumb>
		<span class="c-red">注意所属职员字段，现在输出的是表字段，一般只显示1个人，但也可能被多个员工跟踪</span>
		<el-table :data="dataList" size="" v-loading="loading" border style="width:100%">
			<el-table-column prop="id" label="id" width="70"></el-table-column>
			<el-table-column prop="name" label="成员名称"></el-table-column>
			<el-table-column prop="avatar" label="头像" width="70">
				<template  slot-scope="scope">
					<img :src="scope.row.avatar" alt="" width="40">
				</template>
			</el-table-column>
			<!--<el-table-column prop="gender" label="性别">-->
			<!--	<template slot-scope="scope">-->
			<!--		<span  class="333" v-if="scope.row.gender== 0">-</span>-->
			<!--		<span  class="333" v-if="scope.row.gender== 1">男</span>-->
			<!--		<span  class="333" v-if="scope.row.gender== 2">女</span>-->
			<!--	</template>-->
			<!--</el-table-column>-->
			<!--<el-table-column prop="gender" label="类型">-->
			<!--	<template slot-scope="scope">-->
			<!--		<span  class="333" v-if="scope.row.type== 1">微信用户</span>-->
			<!--		<span  class="333" v-if="scope.row.type== 2">企业微信</span>-->
			<!--	</template>-->
			<!--</el-table-column>-->
			<el-table-column prop="externalUserid" label="外部客户id"></el-table-column>
			<el-table-column prop="openId" label="openid"></el-table-column>
			<el-table-column prop="remarkMobiles" label="mobile"></el-table-column>

			<el-table-column prop="userid" label="所属职员">
				<template slot-scope="scope">

					<a style="color:blue" @click="showUser(scope.row)">{{scope.row.userid}}</a>
				</template>
			</el-table-column>
			<el-table-column prop="createTime" label="创建时间"></el-table-column>

			<el-table-column label="操作" fixed="right" width="100">
				<template slot-scope="scope">
					无
				</template>
			</el-table-column>

		</el-table>
		<div class="hidden-xs">
			<el-pagination
				background
				:pager-count="pagerCount"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="page"
				:page-sizes="[10, 20, 30, 40]"
				:page-size="pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="totalCount">
			</el-pagination>
		</div>
		<div class="visible-xs">
			<el-pagination
				background
				:pager-count="pagerCount"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="page"
				layout="pager"
				:total="totalCount">
			</el-pagination>
		</div>

		<!--弹层-->
		<el-dialog title="查看" :visible.sync="visibleDialog" width="30%" >
			<div class="global-input-content">
				{{userData}}
			</div>
		</el-dialog>
	</div>
</template>

<script>
import {
	apiWxWorkExternalUserList, apiWxWrokUserData,
} from '@/axios/api.system';
import { mixins } from '@/mixins/mixins.global';
import { mixinUtils } from '@/mixins/mixins.utils';
import breadCrumb from '@/views/components/breadCrumb';
export default {
	name: 'wxWorkExternalUser',
	mixins:[mixins,mixinUtils],
	components:{breadCrumb},
	data() {
		return {
			visibleDialog:false,
			//原始值
			pagerCount: 5,//饿了么垃圾分页的页块显示
			page      : 1,
			pageSize  : 10,
			totalCount: 0,//总记录数
			//复杂值
			dataList: [],//默认数据
			userData:{},//用户数据
		}
	},
	mounted() {
	},
	created() {
		this.getDataList()
	},
	methods:{
		//请求默认数据
		getDataList() {
			apiWxWorkExternalUserList({
				pageSize: this.pageSize,
				page    : this.page,
			}).then(( res ) => {
				this.totalCount = res.count
				if (res.data.length > 0) {
					this.dataList = res.data
				} else {
					this.dataList = []
				}
			})
		},


		//显示（员工）
		showUser(data) {
			this.visibleDialog = true
			let _userid = data.userid
			console.log('用户id'+_userid)
			apiWxWrokUserData({
				userId : _userid
			}).then((res)=>{
			    this.userData = res.data
			})
		},


		handleSizeChange (val) {
			console.log('改变每页数',val)
			this.page = 1 //恢复第一页
			this.pageSize = val
			this.getDataList()
		},
		handleCurrentChange (val) {
			console.log('改变当前页',val)
			this.page = val
			this.getDataList()
		},
	}

};
</script>

<style lang="less">

</style>
